<template>
	<view class="txVideo-page">
		<view id="video_box" class="video_box" ref="video_box"></view>
		<view class="video-header" v-if="isShowControl"><slot></slot></view>
	</view>
</template>

<script>
function loadTcScript(cb) {
	loadScript(
		function() {
			loadScript(cb, {
				id: 'tcPlayerScriptId',
				url: '//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.min.js'
			});
		},
		{
			id: 'hlsScriptId',
			url: '//imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.12.4.js'
		}
	);
}

function loadScript(cb, obj) {
	if (document.getElementById(obj.id)) {
		cb();
	} else {
		const script = document.createElement('script');
		script.async = true;
		script.src = obj.url;
		script.id = obj.id;
		script.onload = () => {
			cb();
		};
		document.body.appendChild(script);
	}
}
export default {
	name: 'TencentPlayer',
	props: {
		options: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	data() {
		return {
			tcPlayerId: 'tcPlayer' + Date.now(),
			player: null, //播放器对象
			currentTime: 0, //当前播放时间点
			isLoadedmetadata: false, //播放器是否加载完毕
			isShowControl: true //是否显示控制面板
		};
	},
	watch: {
		options: {
			handler(newV, oldV) {
				this.$nextTick(() => {
					this.loadJS();
				});
			}
		}
	},
	created() {},
	destroyed() {
		if (this.player) {
			this.player.dispose();
		}
	},
	methods: {
		loadJS() {
			if (window.TCPlayer) {
				this.initVideo();
			} else {
				loadTcScript(() => {
					console.log(window.TCPlayer);
					this.initVideo();
				});
			}
		},
		initVideo() {
			// const playerParm = this.options;
			setTimeout(() => {
				if (!this.player) {
					this.createVideo(this.options);
				} else {
					this.isLoadedmetadata = false;
					this.player.loadVideoByID(this.options);
				}
			}, 100);
		},
		createVideo(playerParm) {
			const el = document.getElementById('video_box');
			let video = document.createElement('video');
			video.id = this.tcPlayerId;
			video.setAttribute('playsinline', true);
			video.setAttribute('webkitPlaysinline', true);
			video.setAttribute('x5-playsinline', true);
			video.setAttribute('controlsList', 'nodownload');
			video.setAttribute('uc-video-toolbar-id', '121212');
			video.preload = 'auto';

			el.appendChild(video);

			this.$nextTick(function() {
				this.player = TCPlayer(this.tcPlayerId, playerParm);
				this.player.on('ended', () => {
					this.$emit('videoEnded');
					this.isShowControl = true;
				});

				this.player.on('pause', () => {
					this.isShowControl = true;
				});

				this.player.on('timeupdate', () => {
					this.currentTime = this.player.currentTime();
				});

				this.player.on('loadedmetadata', () => {
					this.isLoadedmetadata = true;
					console.log('加载完成');
				});
			});
		},
		/*
		 * cs 2020-6-3
		 *  暂停
		 */
		pause() {
			if (this.isLoadedmetadata) {
				console.log('暂停');
				if (this.player) {
					this.player.pause();
				}
			}
		},
		/*
		 * cs 2020-6-3
		 * 播放
		 */
		play() {
			if (this.isLoadedmetadata) {
				this.player.play();
			}
		},
		/*
		 * cs 2020-6-3
		 * 销毁播放器
		 */
		xiaohui() {
			if (this.player) {
				this.player.dispose();
				this.player = null;
			}
		},
		/*
		 * cs 2020-8-6
		 * 重新播放
		 */
		rePlay() {
			this.loadJS();
		}
	}
};
</script>

<style lang="scss" scoped>
@import url('//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css');

.txVideo-page {
	width: 100%;
	height: 420rpx;
	position: relative;
}

.video_box {
	width: 100%;
	height: 420rpx;
	// height: 500rpx;
}

.video_box /deep/ .video-js {
	width: 100%;
	height: 420rpx;
	max-width: 100%;
	padding-top: 56.25%;
}

.video-header {
	color: #fff;
	position: absolute;
	width: 100%;
	padding: 30rpx 20rpx;
	z-index: 99;
	top: 0;
	left: 0;
}

video::-internal-media-controls-download-button {
	display: none;
}

video::-webkit-media-controls-enclosure {
	overflow: hidden;
}
video::-webkit-media-controls-panel {
	width: calc(100% + 50px);
}
</style>
